<template>
	<view class="box1">
		<view class="" ><Title :txt="'重置登录密码'" :showback="true"></Title></view>
		<view class="" >
			<view class="dash1 fcs mgt20"></view>
			<view class="dash fsc"></view>
			<view class="itembox mgt24 fsc border">
				<view class="item fcs"><view class="f16">手机号</view></view>
				<view class="f14 fse">
					<input type="number" disabled="true" style="margin-right: 24rpx;" placeholder-style="color:#ddd;" class=""  placeholder="请输入手机号码" v-model="tel" />
					<button class="f12" :class="!btnfalse?'buttonable':'buttondisable'" :disabled="btnfalse" @click="getCode">{{codeText}}</button>
				</view>
			</view>
			<view class="itembox mgt24 fsc border">
				<view class="item fcs"><view class="f16">手机号验证码</view></view>
				<view class="f14 fsc">
					<input  type="number" style="text-align:right;" placeholder-style="color:#ddd;" class="" maxlength="11" placeholder="请输入验证码" v-model="code" />
				</view>
			</view>
			<view class="itembox mgt24 fsc border">
				<view class="item fcs"><view class="f16">邮箱</view></view>
				<view class="f14 fse">
					<input type="text" disabled="true" style="margin-right: 24rpx;" placeholder-style="color:#ddd;" class=""  placeholder="请输入邮箱号" v-model="email" />
					<button class="f12" :class="!btnfalse1?'buttonable':'buttondisable'" :disabled="btnfalse1" @click="getEmailCode">{{codeText1}}</button>
				</view>
			</view>
			<view class="itembox mgt24 fsc border">
				<view class="item fcs"><view class="f16">邮箱验证码</view></view>
				<view class="f14 fsc">
					<input type="number" placeholder-style="color:#ddd;" class="" maxlength="6" placeholder="请输入邮箱验证码" v-model="emailcode" />
				</view>
			</view>
		<view class="itembox mgt24 fsc border">
			<view class="item fcs"><view class="f16">设置登录密码</view></view>
			<view class="f14 fsc">
				<input type="password" placeholder-style="color:#ddd;" class="" maxlength="11" placeholder="请输入密码" v-model="password" />
			</view>
		</view>
			<view class="itembox mgt24 fsc border">
				<view class="item fcs"><view class="f16">确认登录密码</view></view>
				<view class="f14 fsc">
					<input type="password" placeholder-style="color:#ddd;" class="" maxlength="11" placeholder="请再次输入密码" v-model="repassword" />
				</view>
			</view>
		</view>
		<view class="mysubmit whitecolor f16" @click="restLoginword">提交</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [{ name: '提币', number: -25.0, time: '2020.09.29 15:04:51' }],
			status: 0,
			active: 2,
			tel:"",
			code:"",
			password:"",
			repassword:"",
			btnfalse: false,
			intdisabled: false,
			 count:60,
			 codeText:"获取验证码",
			 email:"",
			 btnfalse1:false,
			 emailcode:"",
			 count1:60,
			 codeText1:"获取验证码",
		};
	},
	onLoad() {
		
		
	},
	onShow() {
		this.$http.post('user.userInfo').then(res=>{
			this.tel=res.data.phone
			this.email=res.data.email
		})
	},
	methods: {
		getCode(){
				var that=this
		
				let params = {
					type:"sms"
				};
			that.$http.post('user.restLoginword',params,{ isAuth: true, tipConfig: { isLoading: false } }).then(res=>{
				that.disabled = true;
				that.intdisabled = false;
				that.btnfalse = true;
				clearInterval(that.time);
				that.time = setInterval(() => {
					that.count -= 1;
					that.codeText = that.count + 's后获取';
					if (that.count === 0) {
						that.count = 60;
						that.disabled = false;
						that.btnfalse = false;
						that.codeText = '获取验证码';
						clearInterval(that.time);
					}
				}, 1000);
			})
		
		},
		getEmailCode(){
			var that=this
			if(!that.code){
				uni.showToast({
					title: '请输入手机验证码',
					icon: 'none'
				});
				return false;
			}
			
				let params = {
					type:"email"
				};
			that.$http.post('user.restLoginword',params,{ isAuth: true, tipConfig: { isLoading: false } }).then(res=>{
				that.disabled = true;
				that.intdisabled = false;
				that.btnfalse1 = true;
				clearInterval(that.time2);
				that.time2 = setInterval(() => {
					that.count1 -= 1;
					that.codeText1= that.count1+ 's后获取';
					if (that.count1=== 0) {
						that.count1 = 60;
						that.disabled = false;
						that.btnfalse1 = false;
						that.codeText1 = '获取验证码';
						clearInterval(that.time2);
					}
				}, 1000);
			})
		},
		restLoginword(){
			if(!this.code){
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return false;
			}
			if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.password)){
			uni.showToast({
				title: '请输入最少8位字母+数字',
				icon: 'none'
			});
			return false;
			}
			if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.repassword)){
			uni.showToast({
				title: '请输入最少8位字母+数字',
				icon: 'none'
			});
			return false;
			}
			if(this.password!==this.repassword){
				uni.showToast({
					title: '两次密码须一致',
					icon: 'none'
				});
				return false
			}
			let params={
				smsCode:this.code,
				newPassword:this.password,
				confirmPassworld:this.repassword,
				emailcode:this.emailcode
			}
			this.$http.post('user.restPassword',params,{ isAuth: true, tipConfig: { isLoading: false } }).then(res=>{
				if(res.code==200){
					uni.reLaunch({
						url:"../login/index"
					})
				}
			})
		}
	}
};
</script>

<style lang="less">
	.uni-input-placeholder{
			display: flex;
			justify-content: flex-end;
			text-align: right !important;
	}
/deep/	.uni-input-input{
		text-align: right !important;
	}
	// /deep/ .uni-input-input{
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	text-align: right;
	// }
	input{
		text-align: left !important;
	}
page {
	background-color:#fff;
}
body,
html {
	background-color: #fff;
}
.box1 {
	padding-bottom: 80rpx;
	.list {
		width: 642rpx;
		height: 252rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 24rpx;
		margin-left: auto;
		margin-right: auto;
		padding: 36rpx;
		position: relative;
		.po {
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}
	.dash1 {
		padding: 0 54rpx;

		image {
			width: 36rpx;
			height: 36rpx;
		}
		.small {
			width: 116rpx;
			height: 2rpx;
			background-color: #dbdcdd;
		}
	}
	.dash {
		width: 100%;
		height: 16rpx;
		background-color: #F3F5F9;
	}
	.itembox {
		width: 690rpx;
		padding: 0 0rpx 36rpx 0rpx;
		border-bottom: 2rpx solid #ccc;
		margin-left: auto;
		margin-right: auto;
		.buttondisable {
			width: 180rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			opacity: 1;
			background: #efefef;
			border-radius: 6rpx;
			color: #6d7278;
		
		}
		.buttonable{
			width: 180rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			opacity: 1;
			background:  #1372df;
			border-radius: 6rpx;
			color: #fff;
		
		}
		input{
			text-align: right;
		}
	}
	.end {
	}
}
.mysubmit {
	width: 690rpx;
	background-color: #1372DF;
	text-align: center;
	height: 88rpx;
	line-height: 88rpx;
	margin-top: 60rpx;
	margin-left: auto;
	margin-right: auto;
}
</style>
